import  {FC ,ReactNode,useState } from 'react'
import { PullToRefresh,  InfiniteScroll } from 'antd-mobile'
import { sleep } from 'antd-mobile/es/utils/sleep'

// 下拉刷新和加载更多 
const MyLoad:FC<{
    children:ReactNode,
    reverserList?:Function,
    loadMoreData?:Function
}> = ({
    children,
    reverserList,
    loadMoreData
}) => {
    const [hasMore, setHasMore] = useState<boolean>(true)
    const onRefresh = async ()=>{
        // 翻转数据  
        await sleep(1000)
        reverserList!()
    }
    // 加载更多 
    const loadMore = async ()=>{
        
        await sleep(1000)
        // setHasMore(false)   
        loadMoreData!(()=>{
            setHasMore(false)   // 数据已经见底了 
        })
    }


    return (
        <PullToRefresh
            onRefresh={onRefresh}
        >
            { children }
            <InfiniteScroll loadMore={loadMore} hasMore={hasMore} threshold={300} />
        </PullToRefresh>
    )
}

export default MyLoad